DC.views.innerListItemTpl = function () {
    return "<div class='item-wrap'> " +
    "<img class='thumb' width='175' height='130' src='http://src.sencha.io/286/{image}' />" +
    "<div class='details'><span class='date'>{date}</span><h3>{title}</h3><span class='tags'>{tags}</span></div>" +
    "</div>";
};

/*DC.views.innerListDetailTpl = function () {
    return "<div class='content'>"+
        "<img class='thumb' width='600' height='300' src='http://src.sencha.io/286/{image}' />"+
        "<h1>{title}</h1>"+
        "<div class='summary'>{summary}</div>"+
        "<ul><li><span>Date</span><strong>{info.date}</strong></li><li><span>Duration</span><strong>{info.duration}</strong></li><li><span>Audience</span><strong>{info.audience}</strong></li><li><span>Category</span><strong>{info.category}</strong></li><li><span>Venue</span><strong>{info.venue}</strong></li></ul>"+
        "<ul><li class='show-map'><a href=''> Show om Map </a></li><li class='share'><a href=''> Share this event </a></li><li class='calendar'><a href=''>Add to calendar </a></li><li class='check-in'><a href=''>Check in to this event </a></li><li class='fav'><a href=''>Add to Favorites</a></li><li class='fav'><a href=''>Visit website</a></li></ul>"+
        "{content}"+
        "<ul class='gallery-image'><tpl for='gallery'><li><a href=''><img class='thumb' width='185' height='140' src='http://src.sencha.io/286/{.}' /></a> </li></tpl></ul>"
        "</div>";
};*/

DC.views.innerListDetailTpl = new Ext.XTemplate(
    "<div class='content'>",
        "<div class='spotlight'><img width='600' height='300' src='http://src.sencha.io/286/{image}' /></div>",
        "<h1>{title}</h1>",
        "<div class='summary'>{summary}</div>",
        "<ul class='event-info'><li><span>Date</span><strong>{info.date}</strong></li><li><span>Duration</span><strong>{info.duration}</strong></li><li><span>Audience</span><strong>{info.audience}</strong></li><li><span>Category</span><strong>{info.category}</strong></li><li><span>Venue</span><strong>{info.venue}</strong></li></ul>",
        "<ul><li class='show-map'><a href=''> Show om Map </a></li><li class='share'><a href=''> Share this event </a></li><li class='calendar'><a href=''>Add to calendar </a></li><li class='check-in'><a href=''>Check in to this event </a></li><li class='fav'><a href=''>Add to Favorites</a></li><li class='fav'><a href=''>Visit website</a></li></ul>",
        "{content}",
        "<div class='event-gallery'>",
            "<h3>Event Gallery</h3>",
            "<ul class='gallery-image'>",
                '<tpl for="gallery">',
                    '<li><a href=""><img class="thumb" width="185" height="140" src="http://src.sencha.io/286/{.}"/></a></li>',
                '</tpl>',
            "</ul>",
        "</div>",
    "</div>"
);

//Views inner list
var btn = new Ext.Button({
    iconMask: true,
    iconCls: 'back_dc'
});
DC.views.DetailView = new Ext.Panel({
    fullscreen:true,
    id:'detailPanel',
    scroll:'vertical',
    //tpl:DC.views.innerListDetailTpl(),
    tpl:DC.views.innerListDetailTpl
});
DC.views.ListView = new Ext.List({
    id:"indexlist",
    store:DC.EventListStore,
    itemTpl:DC.views.innerListItemTpl(),
    itemCls: 'dcEventList',
    listeners: {
        itemtap: function (list, index, element, event) {
            DC.views.DetailView.setLoading(true,true);
            DetailsViewData = {
                id:150,
                title: "Dubai International Dance Festival 2011",
                image:"http://www.orkutgroup.com/scraps/scenery-scraps-orkut-10.jpg",
                summary:"The Festival brings together and presents the best young performers and performing companies.",
                info:{
                    date:"Friday, 01 June - 06 June, 2011",
                    duration:"6 days",
                    audience:"General Public",
                    category:"Arts & Culture, Entertainment",
                    venue:"First Group Theatre, Madinat"
                },
                tools:{
                    showmap : "lan:2.546, laun:2564.122",
                    share:"",
                    addtocal:"",
                    checkin:"",
                    addtofav:"",
                    web:"http://google.com"
                },
                content:"<p>The Festival brings together and presents the best young performers and performing companies. It is a unique multi-arts event and has a reputation for attracting some of the finest young dance companies, classical dance academies, youth orchestras,bands and music ensembles from around the region and the world.</p><h3>Dubai International Dance Festival Timing:</h3><ul><li><strong>Sat-wed:</strong> 10:00 AM - 10:00 PM</li><li><strong>Sat-wed:</strong> 10:00 AM - 10:00 PM</li><li><strong>Sat-wed:</strong> 10:00 AM - 10:00 PM</li></ul>",
                gallery:[
                        "http://www.edesktopwallpapers.com/wp-content/uploads/2009/11/15281d1221215993-nature-wallpaper-scenery-4541.jpg",
                        "http://www.orkutgroup.com/scraps/scenery-scraps-orkut-10.jpg",
                        "http://s.chakpak.com/se_images/49760_-1_564_none/scenery.jpg",
                        "http://good-wallpapers.com/pictures/2824/1440_Sydney%20Scenery.jpg",
                        "http://t1.gstatic.com/images?q=tbn:ANd9GcQkOIrwYnUh4qmd8e4gUBQbpZQTb2X14x_pdIVzT2R7cpPteWNupgAUnzdw",
                        "http://www.sky-wallpaper.com/uploads/2010-11/fantastic-undersea-wallpaper/1289532594-RXVRTFC.jpg"
                    ]
            }
            DC.views.DetailView.update(DetailsViewData);
            DC.views.ListPanel.setActiveItem('detailPanel');
            DC.views.DetailView.setLoading(false);
        }
    }
})
//Event list main container
DC.views.events = Ext.extend(Ext.Panel,{
    fullscreen:true,
    layout: 'fit',
    title:'Events',
    iconCls:'event_dc',
    items:[
        DC.views.ListPanel = new Ext.Panel({
            fullscreen:true,
            layout:'card',
            dockedItems:{
                xtype:'toolbar',
                title:'Events',
                items:btn
            },
            items:[DC.views.ListView, DC.views.DetailView]
        })
    ]
    
});
Ext.reg('events', DC.views.events);
